<template>
  <div class="modelingSettings">
    <div class="modelingSettingsLeft" ref="modelingSettingsLeft">
      <housing-model-aside @onSearch="productSearch" :productId="productId"
        :buildingId="buildingId" :productTypeSmall="productTypeSmall"></housing-model-aside>
    </div>

    <div class="modelingSettingsRight houseingModel">
      <h2>{{buildingAname}}</h2>
      <div class="btnBox">
        <span v-if="isImported">已选{{ unitDTOSLength }}项</span>
        <Button v-if="isImported&&unlocking('0103020901')" type="info" @click="deleteRoomFun"
          :disabled='orderDisabled'>删除房源</Button>
        <Button v-if="isImported&&unlocking('0103020902')" type="success" @click="editRoomCode"
          :disabled='orderLengthDisabled'>修改房号</Button>
        <Button v-if="isImported&&unlocking('0103020903')" type="success"
          @click="relateRoomFun" :disabled='orderLengthDisabled'>关联户型</Button>
        <Button v-if="isImported&&unlocking('0103020904')" type="success" @click="editRoomMsg"
          :disabled='orderLengthDisabled'>编辑房源</Button>
        <Button type="primary" @click="importHouse"
          v-if="unlocking('0103020905')">导入房源信息</Button>
        <!-- <Button type="primary" @click="importHouse" :disabled='importDisabled'
          v-if="unlocking('0103020905')">导入房源信息</Button> -->

        <Button v-if="isImported&&unlocking('0103020909')" type="primary"
          @click="creatUnit">新建单元</Button>
        <Button v-if="isImported&&unlocking('0103020907')" type="primary"
          @click="creatRoom">新建房间</Button>
        <Button type="primary" v-if="isImported && productType == 1&&unlocking('0103020906')"
          @click="createFloor">
          新建楼层</Button>
      </div>
      <div class="tip" v-if="unlocking('0103020908')">
        <p>
          <Icon type="ios-quote" /> 房号显示规则：楼栋名称+单元名称+房间号
          <span @click="modify"> 修改</span>
        </p>
      </div>

      <house-room ref="houseRoom" :propUnitDTOS="unitDTOS" :productType="productType"
        :isImported="isImported" @roomSelChange='roomSelChange'></house-room>

      <!-- <div class="tabConBox" ref="TableHeight" :style="{ height: onresizeHeight + 'px' }">
        <div class="tab" :style="{ height: '100%', overflowY: 'auto' }">
          <table class="tabBox" v-for="(item, index) in unitDTOS" :key="index">
            <tr class="title tabCommon">
              <th v-if="productType != 3">
                {{ productType == 1 ? "楼层" : "分区" }}
              </th>
              <th :colspan="isImported ? item.maxRoomCount : item.roomSetCount">
                <Poptip trigger="hover">
                  <Checkbox v-model="item.isSelected" @on-change="
                      (event) => {
                        return unitOnclick(
                          event,
                          item.unitId,
                          'unit',
                          item.unitId
                        );
                      }
                    "></Checkbox>{{ item.unitName }}
                  <div slot="content">
                    <div class="impotBtn" @click="updataUnitNameClick(item.unitId)">
                      修改名称
                    </div>
                    <div class="impotBtn" @click="delUnitName(item.unitId)">
                      删除
                    </div>
                  </div>
                </Poptip>
              </th>
            </tr>

            <tr class="subtitle tabCommon">
              <td v-if="productType != 3">&nbsp;</td>
              <td v-for="(colsItem, index) in item.colsData" :key="index">
                <Checkbox v-model="colsItem.isSelected" @on-change="
                    (event) => {
                      return unitOnclick(event, index, 'cols', item.unitId);
                    }
                  "></Checkbox>
                全列
              </td>
            </tr>

            <tr class="floor tabCommon" v-for="(floorItem, index) in item.floorDTOS" :key="index">
              <td class="floorNum" v-if="productType != 3">
                <Poptip trigger="hover">
                  <Checkbox v-model="floorItem.isSelected" @on-change="
                      (event) => {
                        return unitOnclick(
                          event,
                          floorItem.floorId,
                          'floor',
                          item.unitId
                        );
                      }
                    "></Checkbox>
                  {{ productType == 1 ? index + 1 : floorItem.floorName }}
                  <div slot="content">
                    <div class="impotBtn" @click="delFloor(item.unitId, floorItem.floorId)">
                      删除
                    </div>
                  </div>
                </Poptip>
              </td>
              <td v-for="(roomItem, roomIndex) in floorItem.roomDTOS" :key="roomIndex">
                <Checkbox v-model="roomItem.isSelected" @on-change="
                    (event) => {
                      return unitOnclick(
                        event,
                        roomItem.roomId,
                        'room',
                        item.unitId,
                        roomIndex
                      );
                    }
                  "></Checkbox>

                <Poptip trigger="hover" popper-class='popperClass'>
                  {{ roomItem.roomCode }}

                  <div slot="content" class="popAll">

                    <div class="popCon">
                      <p>
                        <span>房源名称：</span><span>{{roomItem.buildingName?roomItem.buildingName+ connectorFormat(roomItem.connector) :''}}{{roomItem.unitName?roomItem.unitName+ connectorFormat(roomItem.connector):''}}{{roomItem.roomCode}}</span>
                      </p>
                      <p><span>售卖状态：</span><span>{{$formatter.switchName('salesStatus',roomItem.sellStatus)}}</span></p>
                      <p><span>关联户型：</span><span>{{roomItem.roomType?roomItem.roomType:''}}</span></p>
                      <p><span>面积：</span><span>{{roomItem.area}}㎡</span></p>
                      <p><span>赠送面积：</span><span>{{roomItem.giveArea}}㎡</span></p>
                      <p><span>销售表价：</span><span>{{roomItem.facePrice}}元</span></p>
                      <p><span>销售底价：</span><span>{{roomItem.basicPrice}}元</span></p>

                    </div>
                  </div>
                </Poptip>

              </td>
            </tr>
          </table>
        </div>
      </div> -->
      <!-- 分页 -->
      <div class="pagePublicStyle" v-show="pageData.total > 0">
        <div class="totalCount">
          当前第 {{ pageData.page }} 页， 当前第
          {{ (pageData.page - 1) * pageData.rows + 1 }} 条到第
          {{
            pageData.page * pageData.rows > pageData.total
              ? pageData.total
              : pageData.page * pageData.rows
          }}
          条， 共 {{ pageData.total }} 条
        </div>
        <Page class="pager" :total="pageData.total" :pageSize="pageData.rows"
          :current="pageData.page" :page-size-opts="pageData.pageSizeOpts"
          @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun"
          placement="top" show-elevator show-sizer />
      </div>
    </div>
    <!-- 房号显示规则 -->
    <Modal v-model="roomNumRulesFlag" title="设置“房号”显示规则" :footer-hide="true"
      @on-cancel="roomNumRulesCancel">
      <div class="roomRulesBox">
        <p>
          <span>楼栋名称</span>
          <i-switch v-model="roomNumRules.buildingName" size="large" @on-change="
              (e) => {
                return switchChange(
                  roomNumRules.buildingName,
                  roomNumRules.unitName,
                  roomNumRules.roomCode
                );
              }
            ">
            <span slot="open">显示</span>
            <span slot="close">隐藏</span>
          </i-switch>
        </p>
        <p>
          <span>单元名称</span>
          <i-switch v-model="roomNumRules.unitName" size="large" @on-change="
              (e) => {
                return switchChange(
                  roomNumRules.buildingName,
                  roomNumRules.unitName,
                  roomNumRules.roomCode
                );
              }
            ">
            <span slot="open">显示</span>
            <span slot="close">隐藏</span>
          </i-switch>
        </p>
        <p>
          <span>房间号</span>
          <i-switch :disabled="true" v-model="roomNumRules.roomCode" size="large" @on-change="
              (e) => {
                return switchChange(
                  roomNumRules.buildingName,
                  roomNumRules.unitName,
                  roomNumRules.roomCode
                );
              }
            ">
            <span slot="open">显示</span>
            <span slot="close">隐藏</span>
          </i-switch>
        </p>
        <div class="symbol">连接符</div>
        <div>
          <RadioGroup v-model="roomNumRules.connector" @on-change="symbolRadioChange">
            <Radio label="1">无</Radio>
            <Radio label="2">“-”</Radio>
            <Radio label="3">“#”</Radio>
            <Radio label="4">空格</Radio>
          </RadioGroup>
        </div>

        <div class="eg">“房间号”显示示例：{{ egSymbol }}</div>
      </div>
      <div class="newBuildingFooter">
        <Button @click="roomNumRulesCancel">取消</Button>
        <Button type="info" @click="roomNumRulesOk">确认</Button>
      </div>
    </Modal>
    <!-- 修改单元名字 -->
    <Modal v-model="updataUnitNameFlag" title="修改名字" :footer-hide="true"
      @on-cancel="updataUnitNameCancel" class-name="updataModal">
      <div class="updataUnitNameBox">
        <Input v-model="updataUnitName" placeholder="请输入要修改的名字" />
      </div>
      <div class="newBuildingFooter">
        <Button @click="updataUnitNameCancel">取消</Button>
        <Button type="info" @click="updataUnitNameOk">确认</Button>
      </div>
    </Modal>
    <!-- 新增楼层 -->
    <Modal v-model="createFloorFlag" title="新建楼层" :footer-hide="true"
      @on-cancel="createFloorCancel" class-name="updataModal">
      <div class="creatFloorBox">
        <p>
          <span> 选择单元：</span>
          <Select v-model="chooseUnit" placeholder="请选择单元" filterable
            @on-select="chooseUnitFun">
            <Option v-for="item in unitDTOS" :value="item.unitId" :key="item.unitId">
              {{ item.unitName }}</Option>
          </Select>
        </p>
        <p v-if="chooseUnit" class="creatFloorClass">
          <span>
            {{ productType == 1 ? xinFloor + "层" : "分区" + xinFloor }}：</span>
          <em v-for="(item, index) in createRoomDTOS" :key="index"><Input
              v-model="item.roomCode" placeholder="请输入房间号" /></em>
        </p>
      </div>

      <div class="newBuildingFooter">
        <Button @click="createFloorCancel">取消</Button>
        <Button type="info" @click="createFloorOk">确认</Button>
      </div>
    </Modal>
    <!-- 新建房间 -->
    <Modal v-model="createRoomFlag" title="新建房间" :footer-hide="true"
      @on-cancel="createRoomCancel" class-name="updataModal">
      <div class="creatFloorBox">
        <p>
          <span>{{ productType == 1 ? "选择单元" : productType==2?"选择楼层":'选择单元' }} ：</span>
          <Select v-model="creatRoomChooseUnit" :placeholder="productType == 1 ? '请选择' : '请选择'"
            filterable @on-select="creatRoomChooseUnitFun">
            <Option v-for="item in unitDTOS" :value="item.unitId" :key="item.unitId">
              {{ item.unitName }}</Option>
          </Select>
        </p>

        <p v-if="productType!=3">
          <span>{{ productType == 1 ? "选择楼层" : "选择分区" }} ：</span>
          <Select v-model="creatRoomChooseFloor"
            :placeholder="productType == 1 ? '选择楼层' : '选择分区'" filterable
            @on-change="creatRoomChoosefloorFun">
            <Option v-for="(item, index) in createFloorDTOS" :value="item.floorId"
              :key="item.floorId">{{ productType == 1 ? index + 1 : item.floorName }}</Option>
          </Select>
        </p>
        <p>
          <span>{{ productType == 2 ? "分区号" : "房间号" }}：</span>
          <Input v-model="createRoomName" :placeholder="productType == 2 ? '分区号' : '房间号'" />
        </p>
      </div>

      <div class="newBuildingFooter">
        <Button @click="createRoomCancel">取消</Button>
        <Button type="info" @click="createRoomOk">确认</Button>
      </div>
    </Modal>

    <!-- 导入房源 -->
    <Modal v-model="importHouseFlag" title="导入房源" @on-cancel="closeEditRoom" width="500"
      :footerHide="true">
      <import-house :buildingId="buildingId" @onClose="closeEditRoom" @onSearch="getAllRoom"
        v-if="importHouseFlag"></import-house>
    </Modal>

    <!--编辑房源-->
    <Modal v-model="editRoomFlag" title="编辑房源" @on-cancel="closeEditRoom" width="500"
      :footerHide="true">
      <edit-room v-if="editRoomFlag" :editRoom="roomEditVOS" :coopMode='coopMode'
        @onClose="closeEditRoom" @onSearch="getAllRoom"></edit-room>
    </Modal>
    <!--修改房号-->
    <Modal v-model="editRoomCodeFlag" title="修改房号" @on-cancel="closeEditRoom" width="500"
      :footerHide="true">
      <edit-room-code v-if="editRoomCodeFlag" :roomList="roomEditVOS" @onClose="closeEditRoom"
        @onSearch="getAllRoom"></edit-room-code>
    </Modal>
    <!--关联户型-->
    <Modal v-model="relateRoomFlag" title="关联户型" @on-cancel="closeEditRoom" width="700"
      :footerHide="true">
      <relate-room v-if="relateRoomFlag" :relateRoomList="roomEditVOS" @onClose="closeEditRoom"
        @onSearch="getAllRoom"></relate-room>
    </Modal>
    <building-add ref="profile" :buildingId="buildingId" @updataData="updataData">
    </building-add>
  </div>
</template>

<script>
  import housingModelAside from './components/housingModelAside.vue'
  import houseRoom from './components/houseRoom.vue'
  import roomMgr from '@/biz/modeling/room/room'
  import editRoom from '../buildingResources/components/editRoom.vue'
  import editRoomCode from '../buildingResources/components/editRoomCode.vue'
  import relateRoom from '../buildingResources/components/relateRoom.vue'
  import importHouse from './components/importHouse.vue'
  import advanceSaleMgr from '@/biz/advanceSaleReview/advanceSaleReview'
  import buildingAdd from './components/buildingAdd.vue'
  export default {
    components: {
      housingModelAside,
      editRoom,
      editRoomCode,
      relateRoom,
      importHouse,
      houseRoom,
      buildingAdd,
    },
    data() {
      return {
        importDisabled: false, // 有订单的禁止导入
        orderDisabled: false, // 有订单的禁止删除
        orderLengthDisabled: false, // 有订单且数据大于两条时

        buildingAname: '',
        onresizeHeight: '',
        isImported: false, //是否导入过房源
        productType: '', //三种产品大类型

        productTypeSmall: this.$route.query.productType, //产品类型

        // 导入房源信息

        productId: this.$route.query.productId,
        coopMode: 0,
        buildingId: this.$route.query.buildingId, //楼栋id
        editRoomFlag: false, // 修改房源
        editRoomCodeFlag: false, //修改房号
        relateRoomFlag: false, //关联户型
        importHouseFlag: false, //导入房源

        roomEditVOS: [], //选中的所有房间list

        // 新建房间
        createFloorDTOS: [], //新建房间时楼层选择列表
        xinFloor: '', //新建楼层时的楼层号
        createRoomName: '', //新建房间时的房间名字
        createRoomFlag: false, //新建房间的弹框显示
        creatRoomChooseUnit: '', //新建房间时选择的楼层
        creatRoomChooseFloor: '', //新建房间时选择的楼层

        // 新建楼层
        chooseUnit: '', //新建楼层时选择的单元
        createFloorFlag: false, //新建楼层flag
        createRoomDTOS: [], //新建楼层时默认出来的楼层房间号，房间数量根据最后的楼层的数量来取
        // 修改单元名字
        updataUnitNameFlag: false, //修改单元弹框
        updataUnitId: '', //修改单元的id
        updataUnitName: '', //修改单元的新名字（要判断重复）

        //所有单元的总数据
        unitDTOS: [],
        unitDTOSLength: 0,

        //房间显示规则相关（还有点小问题）
        roomNumRulesFlag: false, //房间显示规则弹框
        roomNumRules: {},
        roomNumRulesFu: '',
        BuildSwitch: true,
        unitSwitch: true,
        roomSwitch: true,
        symbolRadio: '1',
        symbol: '',
        egSymbol: '',

        pageData: {
          total: 0,
          page: 1,
          rows: 50,
          pageSizeOpts: [10, 20, 30, 40, 50],
        },
      }
    },

    // filters: {
    //   connectorFormat(val) {
    //     if (val == '1') {
    //       this.symbol = ''
    //     } else if (val == '2') {
    //       this.symbol = '-'
    //     } else if (val == '3') {
    //       this.symbol = '#'
    //     } else {
    //       this.symbol = ' '
    //     }
    //   },
    // },

    methods: {
      updataData() {
        this.getAllRoom()
      },
      roomSelChange(val) {
        this.roomEditVOS = val
        let ind = this.roomEditVOS.findIndex((item) => {
          return item.sellStatus == 3 || item.sellStatus == 4
        })

        if (ind != -1) {
          this.orderDisabled = true
        } else {
          this.orderDisabled = false
        }

        if (ind != -1 && this.roomEditVOS.length > 1) {
          this.orderLengthDisabled = true
        } else {
          this.orderLengthDisabled = false
        }

        this.unitDTOSLength = this.roomEditVOS ?
          this.roomEditVOS.length ?
          this.roomEditVOS.length :
          '' :
          ''
      },
      connectorFormat(val) {
        if (val == '1') {
          return ''
        } else if (val == '2') {
          return '-'
        } else if (val == '3') {
          return '#'
        } else {
          return ' '
        }
      },
      // 编辑房源 关闭弹框
      closeEditRoom() {
        this.editRoomFlag = false
        this.editRoomCodeFlag = false
        this.relateRoomFlag = false
        this.importHouseFlag = false
      },
      // 导入房源
      importHouse() {
        this.importHouseFlag = true
      },

      editRoomMsg() {
        if (!this.roomEditVOS.length) {
          this.$Message.info('请先选择您要编辑的房源！')
          return false
        }
        this.editRoomFlag = true
      },
      // 修改房号
      editRoomCode() {
        if (!this.roomEditVOS.length) {
          this.$Message.info('请先选择您要修改的房号！')
          return false
        }
        this.editRoomCodeFlag = true
      },
      // 关联户型
      relateRoomFun() {
        if (!this.roomEditVOS.length) {
          this.$Message.info('请先选择您要关联户型的数据！')
          return false
        }
        this.relateRoomFlag = true
      },

      // 新建房间选择楼层
      creatRoomChoosefloorFun() {},

      createRoomCancel() {
        this.createRoomFlag = false
        this.creatRoomChooseUnit = ''
        this.creatRoomChooseFloor = ''
        this.createRoomName = ''
      },
      createRoomOk() {
        let ind = this.unitDTOS.findIndex((item) => {
          return item.unitId == this.creatRoomChooseUnit
        })

        let ffloorId = this.unitDTOS[ind].floorDTOS[0].floorId

        if (this.creatRoomChooseUnit == '') {
          this.$Message.warning('请选择单元。')
          return false
        }

        if (this.creatRoomChooseFloor == '' && this.productType != 3) {
          this.$Message.warning('请选择楼层。')
          return false
        }

        if (this.createRoomName == '') {
          this.$Message.warning('请完善房间号。')
          return false
        }

        let params = {
          // floorId: this.creatRoomChooseFloor,
          roomCode: this.createRoomName,
          unitId: this.creatRoomChooseUnit,
        }

        if (this.productType == 3) {
          params.floorId = ffloorId
        } else {
          params.floorId = this.creatRoomChooseFloor
        }

        roomMgr
          .getAddRoom(params)
          .then((res) => {
            this.$Message.info('新建楼层成功。')
            this.createRoomCancel()
            this.getAllRoom()
          })
          .catch((res) => this.$Message.error(res))
      },

      // 新建房间选择单元
      creatRoomChooseUnitFun(val) {
        this.creatRoomChooseUnit = val.value
        this.createFloorDTOS = []
        console.log(
          val.value,
          this.creatRoomChooseUnit,
          this.unitDTOS,
          '选择单元'
        )
        let ind = this.unitDTOS.findIndex((item) => {
          return item.unitId == val.value
        })

        console.log(this.unitDTOS[ind], 'this.unitDTOS[ind].floorDTOS')

        this.unitDTOS[ind].floorDTOS.forEach((item) => {
          this.createFloorDTOS.push(item)
        })

        console.log(this.createFloorDTOS, 'this.createFloorDTOS')

        // this.xinFloor =
        //   this.unitDTOS[ind].floorDTOS && this.unitDTOS[ind].floorDTOS.length + 1;
        // console.log(this.xinFloor, "this.xinFloor");

        // this.unitDTOS[ind].floorDTOS[
        //   this.unitDTOS[ind].floorDTOS.length - 1
        // ].roomDTOS.forEach((item) => {
        //   this.createRoomDTOS.push({
        //     roomCode: "",
        //   });
        // });
      },

      // 新建楼层选择单元
      chooseUnitFun(val) {
        this.chooseUnit = val.value
        this.createRoomDTOS = []
        console.log(val.value, this.chooseUnit, '选择单元')
        let ind = this.unitDTOS.findIndex((item) => {
          return item.unitId == val.value
        })

        this.xinFloor =
          this.unitDTOS[ind].floorDTOS && this.unitDTOS[ind].floorDTOS.length + 1
        console.log(this.xinFloor, 'this.xinFloor')

        this.unitDTOS[ind].floorDTOS[
          this.unitDTOS[ind].floorDTOS.length - 1
        ].roomDTOS.forEach((item) => {
          this.createRoomDTOS.push({
            roomCode: '',
          })
        })

        console.log(this.createRoomDTOS, 'this.createRoomDTOS')
      },

      createFloorCancel() {
        this.createFloorFlag = false
        this.chooseUnit = ''
        this.xinFloor = ''
        this.createRoomDTOS.forEach((item) => {
          item.roomCode = ''
        })
      },
      // 新建楼层确定
      createFloorOk() {
        if (this.chooseUnit == '') {
          this.$Message.warning('请选择单元。')
          return false
        }
        let flg = this.createRoomDTOS.some((item) => {
          return item.roomCode == ''
        })
        if (flg) {
          this.$Message.warning('请完善房间号。')
          return false
        }

        let arr = []
        this.createRoomDTOS.forEach((item) => {
          arr.push(item.roomCode)
        })
        console.log(arr, 'arr')
        let params = {
          roomCodes: arr,
          unitId: this.chooseUnit,
        }
        if (this.productType == 1) {
          params.floorName = this.xinFloor
        }
        roomMgr
          .saveFloorRoom(params)
          .then((res) => {
            this.$Message.info('新建楼层成功。')
            this.createFloorCancel()
            this.getAllRoom()
          })
          .catch((res) => this.$Message.error(res))
      },

      // 新建楼层按钮
      createFloor() {
        this.createFloorFlag = true
      },
      // 新建房间按钮
      creatRoom() {
        this.createRoomFlag = true
      },
      // 新建单元
      creatUnit() {
        console.log(this.unitDTOS, 'unitDTOSunitDTOSunitDTOSunitDTOS1111');
        let unitNameListArr = []
        this.unitDTOS.forEach(item => {
          unitNameListArr.push(item.unitName)
        })
        this.$refs.profile.show('unitCreat', unitNameListArr)
      },

      // poptit 删除单元
      delUnitName(unitId) {
        let params = {
          unitId: unitId,
          buildingId: this.buildingId,
        }

        this.$Modal.confirm({
          title: '删除单元',
          content: `确认删除该单元？`,
          onOk: () => {
            roomMgr
              .unitDel(params)
              .then((res) => {
                this.$Message.info('删除成功。')
                this.getAllRoom()
              })
              .catch((res) => this.$Message.error(res))
          },
          onCancel: () => {
            this.$Message.info('您取消了删除。')
          },
        })
      },

      // poptit 删除楼层
      delFloor(unitId, floorId) {
        let params = {
          unitId: unitId,
          floorId: floorId,
        }
        this.$Modal.confirm({
          title: '删除楼层',
          content: `确认删除该楼层？`,
          onOk: () => {
            roomMgr
              .getFloorDel(params)
              .then((res) => {
                this.$Message.info('删除成功。')
                this.getAllRoom()
              })
              .catch((res) => this.$Message.error(res))
          },
          onCancel: () => {
            this.$Message.info('您取消了删除。')
          },
        })
      },

      // 修改单元名字
      updataUnitNameClick(val) {
        this.updataUnitId = val
        this.updataUnitNameFlag = true
      },
      // 修改单元名称相关
      updataUnitNameOk() {
        if (!this.updataUnitName) {
          this.$Message.warning('单元名字不能为空。')
          return false;
        }
        let params = {
          unitId: this.updataUnitId,
          unitName: this.updataUnitName,
        }
        roomMgr
          .saveOrEdit(params)
          .then((res) => {
            console.log(res, '修改单元名字')
            this.$Message.success('单元名字修改成功。')
            this.updataUnitNameCancel()
            this.getAllRoom()
          })
          .catch((res) => this.$Message.error(res))
      },
      updataUnitNameCancel() {
        this.updataUnitNameFlag = false
        this.updataUnitName = ''
      },

      // 初始化数据添加isSelected 属性
      chooseChange(val) {
        this.unitDTOS.forEach((item) => {
          this.addIsSelected(item, val)
          if (item.floorDTOS) {
            item.floorDTOS.forEach((floorItem) => {
              this.addIsSelected(floorItem, val)
              if (floorItem.roomDTOS) {
                floorItem.roomDTOS.forEach((roomItem) => {
                  this.addIsSelected(roomItem, val)
                })
              }
            })
          }
        })
      },

      addIsSelected(obj, val) {
        this.$set(obj, 'isSelected', val)
      },

      // 删除房源
      deleteRoomFun() {
        if (!this.roomEditVOS.length) {
          this.$Message.info('请选择要删除的房源。')
          return false
        }
        let params = {
          roomEditVOS: this.roomEditVOS,
        }
        this.$Modal.confirm({
          title: '删除房源',

          // content: `<p>请确认,您要删除${params.roomEditVOS
          //   .map((item) => {
          //     return item.roomCode
          //   })
          //   .join(',')}房源，删除后不可恢复！</p>`,

          content: `<p>请确认,您要删除${params.roomEditVOS.length}个房源，删除后不可恢复！</p>`,
          onOk: () => {
            roomMgr
              .delRoomFun(params)
              .then((res) => {
                this.$Message.info('删除成功。')
                // this.initData();
                this.getAllRoom()
              })
              .catch((res) => this.$Message.error(res))
          },
          onCancel: () => {
            this.$Message.info('您取消了删除。')
          },
        })
      },

      productSearch(parmas) {
        console.log(parmas, '子组件的传参')
        this.buildingId = parmas.buildingId
        this.buildingAname = parmas.buildingName
        this.getAllRoom()
        this.$refs.houseRoom.changeScrollLeft()
      },

      getAllRoom() {
        let params = {
          buildingId: this.buildingId,
        }
        roomMgr
          .getAllRoom(params)
          .then((res) => {
            if (res) {
              console.log(res, '我是所有的房间')
              this.isImported = res.isImported
              this.productType = res.productType
              this.unitDTOS = res.unitDTOS

              this.unitDTOS.forEach((item) => {
                let colsData = []
                if (this.isImported) {
                  for (let index = 0; index < item.maxRoomCount; index++) {
                    colsData.push({
                      isSelected: false,
                    })
                  }
                } else {
                  for (let index = 0; index < item.roomSetCount; index++) {
                    colsData.push({
                      isSelected: false,
                    })
                  }
                }

                item.colsData = colsData
              })

              let arrAll = []
              this.unitDTOS.forEach((item) => {
                if (item.floorDTOS && item.floorDTOS.length > 0) {
                  item.floorDTOS.forEach((floorItem) => {
                    if (floorItem.roomDTOS && floorItem.roomDTOS.length > 0) {
                      floorItem.roomDTOS.forEach((roomItem) => {
                        arrAll.push(roomItem)
                      })
                    }
                  })
                }
              })
              let disFlag = arrAll.some((item) => {
                return item.sellStatus == 3 || item.sellStatus == 4
              })
              if (disFlag) {
                this.importDisabled = true
              } else {
                this.importDisabled = false
              }

              console.log(this.importDisabled, 'this.importDisabled')

              this.chooseChange(false)

              console.log(this.unitDTOS, 'this.unitDTOS')
            } else {
              this.unitDTOS = []
            }

            this.roomEditVOS = []
          })
          .catch((res) => this.$Message.error(res))
      },

      // 分页 页码改变事件
      pageOnChangeFun(page) {
        console.log('页码改变事件')
        this.pageData.page = page
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows
      },

      // 房间号显示规则相关（待优化）
      roomNumRulesOk() {
        let params = {
          buildingId: this.buildingId,
          id: this.roomNumRules.id,
          buildingName: this.roomNumRules.buildingName,
          unitName: this.roomNumRules.unitName,
          roomCode: this.roomNumRules.roomCode,
          connector: this.roomNumRules.connector,
          connectorValue: this.symbol,
        }
        roomMgr
          .setRoomNumRule(params)
          .then((res) => {
            console.log('我是修改房间号显示规则')
            this.getAllRoom()
          })
          .catch((res) => this.$Message.error(res))
        this.roomNumRulesFlag = false
      },
      modify() {
        let params = {
          buildingId: this.buildingId,
        }
        roomMgr
          .roomNumRule(params)
          .then((res) => {
            console.log('我是房间号显示规则')
            this.roomNumRules = res
            this.symbolRadioChange(res.connector)
          })
          .catch((res) => this.$Message.error(res))
        this.roomNumRulesFlag = true
      },
      roomNumRulesCancel() {
        this.roomNumRulesFlag = false
      },

      symbolRadioChange(val) {
        if (val) {
          if (val == '1') {
            this.symbol = ''
          } else if (val == '2') {
            this.symbol = '-'
          } else if (val == '3') {
            this.symbol = '#'
          } else {
            this.symbol = ' '
          }
        }

        this.switchChange(
          this.roomNumRules.buildingName,
          this.roomNumRules.unitName,
          this.roomNumRules.roomCode
        )
      },

      switchChange(eg1, eg2, eg3) {
        let str1 = ''
        let str2 = ''
        let str3 = ''
        if (eg1) {
          str1 = `A1幢${this.symbol}`
        }
        if (eg2) {
          str2 = `1单元${this.symbol}`
        }
        if (eg3) {
          str3 = `503`
        }
        this.egSymbol = str1 + str2 + str3
      },
    },

    computed: {},
    watch: {},
    mounted() {
      // window.onresize = () => {
      //   return (() => {
      //     setTimeout(() => {
      //       this.onresizeHeight =
      //         window.innerHeight - this.$refs.TableHeight.offsetTop - 50
      //     }, 10)
      //   })()
      // }
      advanceSaleMgr.productInfo({ productId: this.productId }).then(res => {
        this.coopMode = res.coopMode
      })
    },

    created() {
      // this.$nextTick(function () {
      //   console.log(this.$refs.TableHeight.offsetTop, 'this.$refs.TableHeight')
      //   this.onresizeHeight =
      //     window.innerHeight - this.$refs.TableHeight.offsetTop - 50
      // })

      this.egSymbol = this.eg1 + this.symbol + this.eg2 + this.symbol + this.eg3
      this.unitDTOS.forEach((item) => {
        let colsData = []
        for (let index = 0; index < item.maxRoomCount; index++) {
          colsData.push({
            isSelected: false,
          })
        }
        item.colsData = colsData
      })

      this.chooseChange(false)

      // this.getAllRoom();
    },
  }
</script>
<style lang='scss' scoped>
  .modelingSettings {
    padding: 10px;
    display: flex;
    width: 100%;
    overflow: hidden;

    .modelingSettingsLeft {
      flex: 0 0 300px;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    .modelingSettingsRight {
      width: calc(100% - 300px);
      flex: 1;
      padding: 10px;
    }
  }

  .houseingModel {
    h2 {
      border-bottom: 1px #e8eaec solid;
      padding-bottom: 15px;
    }

    .btnBox {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      span {
        margin-right: auto;
      }

      button {
        margin-left: 10px;
      }
    }

    .tip {
      p {
        padding: 10px;
        background: rgba(254, 252, 236, 1);
        margin-top: 10px;
        display: inline-block;

        span {
          color: #2d8cf0;
          cursor: pointer;
        }
      }
    }
  }

  .newBuildingFooter {
    padding-top: 16px;
    text-align: center;

    button {
      width: 90px;
      margin: 0 10px;
    }
  }

  .roomRulesBox {
    p {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 15px;
    }

    .symbol {
      margin: 15px 0 10px;
    }
  }

  .tabConBox {
    width: 100%;
    overflow: hidden;
  }

  .tab {
    padding: 0 20px 0 0;
    display: flex;
    flex-direction: row;
    // padding: 20px;
    width: 100%;
    overflow-x: auto;

    .tabBox {
      height: fit-content;

      input {
        margin: 5px;
        vertical-align: -2px;
      }
    }
  }

  table {
    margin: 5px;
    border-collapse: collapse;
    border: 1px solid #dcdee2;
  }

  td,
  th {
    border-collapse: collapse;
    border: 1px solid #dcdee2;
    padding: 5px 20px;
    box-sizing: border-box;
    min-width: 110px;
  }

  .impotBtn {
    line-height: 2;
    cursor: pointer;
    color: #2d8cf0;
    text-align: center;
    font-weight: normal;

    &:first-child {
      border-bottom: 1px #e8eaec solid;
    }
  }

  .updataUnitNameBox {
    padding: 20px;
  }

  .updataModal {
    z-index: 1061;
  }

  .creatFloorBox {
    max-height: 450px;
    overflow-y: auto;

    p {
      display: flex;
      flex-direction: row;
      min-height: 50px;
      margin-top: 10px;

      span {
        line-height: 32px;
        flex: 0 0 90px;
        text-align: right;
      }
    }
  }

  .creatFloorClass {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;

    em {
      width: 100px;
      margin: 5px;
    }
  }
</style>
<style>
  .popperClass .ivu-poptip-inner {
    background: rgba(235, 247, 255, 1) !important;
  }
</style>